<template>
	<view class="bodyContent">
		<view class="registerImg">
			<image src="../../static/img/login/loginImg@2x.png" v-if="typeShow == 1"></image>
			<image src="../../static/img/login/yzmLogin.png" v-if="typeShow == 2" style="width: 320upx;"></image>
		</view>
		<navigator url="/pages/login/registe" class="tips"  v-if="typeShow == 1">还没有账号，立即<text>注册</text></navigator>
		<!-- 登录 -->
		<view class="mainContent">
			<!-- 密码登录 -->
			<view class="passwordBox" v-if="typeShow == 1">
				<view>
					<input type="text" v-model="phone" placeholder="输入手机号"  @blur="verifyMobile">
				</view>
				<view>
					<input type="password" v-model="password"  placeholder="密码">
				</view>
			</view>
			
			<!-- 验证码提示 -->
			<view class="authCode" v-if="typeShow == 2">
				<view>
					<input type="text"  v-model="phone" placeholder="输入手机号" @blur="verifyMobile">
				</view>
				<view>
					<input type="text" v-model="code" placeholder="输入验证码">
					<text @click="sendCode">{{codeMsg}}</text>
				</view>
			</view>
			
			<view class="function" v-if="typeShow == 1">			
				<navigator url="/pages/login/modifyPassword">忘记密码</navigator>
				<text @click="typeShow = 2">验证码登录</text>
			</view>
		
			<!-- 登录 -->
			<view class="toLogin" @click="login">登录</view>
			<view class="accountLogin" @click="typeShow = 1" v-if="typeShow == 2">账号密码登录</view>
			
			<!-- 微信登录 -->
			<view class="weixin"  @click="getOpenId(getUrlParam('code'))">
				<view>微信登录</view>
				<image src="../../static/img/login/weixin@2x.png"></image>			
			</view>
		</view>
		<u-modal v-model="showModal" :show-cancel-button="showCancelButton" :confirm-text="confirmText" :cancel-text="cancelText" @confirm="Modalconfirm" :content="showContent"></u-modal>
	</view>
</template>

<script src="../../static/js/login/login.js"></script>

<style lang="scss" scoped>
	.bodyContent {
		height: calc(100vh - 44px); 
		width: 750upx;
		padding: 60upx 82upx 0;
		box-sizing: border-box;
		background: url(../../static/img/login/background.png) no-repeat;
		background-size: 100% 100%;
		.registerImg {
			width:126upx;
			height: 66upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.tips {
			margin: 22upx 0 40upx;
			color: #333333;
			font-size: 30upx;
			text {
				color: #04BFAB;
			}
		}
		/* 登录 */
		.mainContent {
			.passwordBox,
			.authCode{
				view {														
					position: relative;
					padding: 64upx 0 0;
					input {						
						height: 46upx;
						color: #333333;
						flex: 1;
						padding-bottom: 26upx;
						border-bottom: 1upx solid #D6D6D6;
					}
					text {
						position: absolute;
						right: 0;
						bottom: 26upx;
						color: #04BFAB;
						font-size: 30upx;
						text-align: center;
						padding: 0;
					}
				}
			}
			.toLogin {
				background-color: #04BFAB;
				height: 90upx;
				width: 100%;
				text-align: center;
				line-height: 90upx;
				margin: 164upx auto 26upx;
				color: #FFFFFF;
				font-size: 30upx;
				border-radius: 45upx;
			}
			.accountLogin {
				color: #333333;
				font-size: 32upx;
				text-align: center;
				margin-top: 35upx;
			}
			.function {
				display: flex;
				justify-content: space-between;
				margin-top: 27upx;
				navigator,text {
					font-size: 30upx;
					color: #333333;
				}
			}
			.weixin {
				position: bottom;
				position: absolute;
				bottom: 68upx;
				left: 50%;
				transform: translateX(-50%);
				image {
					width: 72upx;
					height: 72upx;
					margin: 0 auto;
					display: block;
				}
				view {
					color: #CCCCCC;
					font-size: 28upx;
					margin-bottom: 33upx;
				}
			}
		}
		uni-button:after {
			border: none;
		}
	}
</style>
